<template>
  <Modal v-model="modal" title="移动至新组织" :closable="false" :mask-closable="false" :width='550'>
    <template v-slot:footer>
      <div>
        <div style="flex: 1;" />
        <Button @click='onCancel'>取消</Button>
        <Button @click='onOk' :loading='loading' type="primary"
          :disabled='okDisabled'>确定</Button>
      </div>
    </template>

    <div v-if='info'>
      <p>
        是否将以下 {{ info.userIds.length }} 个人员移动至：
        <span v-if='info.toOrgId.level == 3'>{{ info.toOrgId.pOrgName }} - </span>
        {{ info.toOrgId.orgName }}？
      </p>
      <div style="margin-top: 10px;">
        <template v-for="(item, idx) in info.userIds">
          <Tag :key='item.userId' closable @on-close="onDelete(idx)">{{ item.name }}</Tag>
        </template>
      </div>
    </div>
  </Modal>
</template>

<script>
  import outMgr from '@/biz/user/out'

  export default {
    data() {
      return {
        modal: false,
        loading: false,
        info: null,
        okDisabled: false
      }
    },
    methods: {
      onOk() {
        this.loading = true
        outMgr.adjustPerson({
          toOrgId: this.info.toOrgId.orgId,
          userIds: this.info.userIds.map(i => (i.userId))
        }).then(res => {
          this.$Message.success('人员所属组织调整成功')
          this.onCancel()
          this.$emit('success')
        }).catch(err => {
          this.loading = false
        })
      },
      onDelete(idx) {
        this.info.userIds.splice(idx, 1)
        if (this.info.userIds.length == 0) this.okDisabled = true
      },
      show(info) {
        this.info = this.$tool.deepClone(info)
        this.modal = true
        this.okDisabled = false
      },
      onCancel() {
        this.info = null
        this.loading = false
        this.modal = false
      },
    },
  }
</script>

<style lang="scss" scoped>
</style>